<template>
    <div class="page-tem">
        <wd-tabs
            v-model="tab"
            sticky
            custom-class="wd-tabs-custom"
            style="width: auto"
        >
          {{designerOrderBy}}
            <wd-tab title="商品">
                <view class="content">
                    <div class="filter-nav">
                        <div
                            class="filter-nav-item"
                            :class="{
                                active: designerOrderBy === 'orders',
                            }"
                            @click="designerOrderBy = 'orders'"
                        >
                            销售量
                        </div>
                        <div
                            class="filter-nav-item"
                            :class="{
                                active: designerOrderBy === 'createTime ',
                            }"
                            @click="designerOrderBy = 'createTime '"
                        >
                            上新
                        </div>
                        <div
                            class="filter-nav-item"
                            :class="{
                                active:
                                    designerOrderBy === 'desc' ||
                                    designerOrderBy === 'asc',
                            }"
                            @click="
                                designerOrderBy =
                                    designerOrderBy === 'desc'
                                        ? 'asc'
                                        : 'desc'
                            "
                        >
                            价格
                            <ArrowUpDown
                                class="sort-icon"
                                :sort="designerOrderBy"
                            ></ArrowUpDown>
                        </div>
                        <div
                            class="filter-nav-item"
                            :class="{
                                active:
                                    designerOrderBy === 'productsLike',
                            }"
                            @click="designerOrderBy = 'productsLike'"
                        >
                            获赞数
                        </div>
                    </div>
                    <view class="product-content">
                        <div class="product-grid">
                            <GoodItem
                                v-for="(product, index) in productPage.list"
                                :key="index"
                                class="product-card"
                                :product="product"
                            >
                            </GoodItem>
                        </div>
                    </view>
                </view>
            </wd-tab>
            <wd-tab title="设计师">
                <view class="content">
                    <div class="filter-nav">
                        <div class="filter-nav-item active">销售量</div>
                        <div class="filter-nav-item">上新</div>
                        <div class="filter-nav-item">
                            价格
                            <image class="sort" src=""></image>
                        </div>
                        <div class="filter-nav-item">获赞数</div>
                    </div>

                    <view class="designer-grid">
                        <Designer
                            v-for="(product, index) in designerList"
                            :key="index"
                            :product="product"
                        >
                        </Designer>
                    </view>
                </view>
            </wd-tab>
        </wd-tabs>
    </div>
</template>
<script setup lang="ts">
import GoodItem from '@/components/good/GoodItem.vue';

import { ref, watch, unref, toRaw, shallowRef } from 'vue';
import Designer from '@/components/designer/Designer.vue';
import { searchDesignersData, searchProductData } from '@/api/searchApi';
import ArrowUpDown from "@/components/ArrowUpDown.vue";
import { usePagination } from "@/hooks/usePagination";
const tab = ref('设计师');

const props = defineProps({
    keyword: {
        type: String,
        default: '',
    },
});
const designerList = shallowRef([]);
const designerOrderBy = ref('orders');
const productList = shallowRef([]);
const productOrderBy = ref('orders');

/**
 * 搜索设计师
 */
function searchDesigners(page: number, pageSize: number) {
  const data = { keyword: props.keyword, page, orderBy: designerOrderBy.value};
  return searchDesignersData(data)
}
const designerPage = usePagination(searchDesigners);
/**
 * 搜索设计师
 */
function searchProduct(page: number, pageSize: number) {
  const data = { keyword: props.keyword, page, orderBy: productOrderBy.value};
  return searchProductData(data)
}
const productPage = usePagination(searchProduct);
watch(
    () => props.keyword,
    (keyword) => {
      designerPage.reset();
      designerPage.load(true);
      productPage.load(true);
    },
    { immediate: true },
);

watch(() => designerOrderBy.value, () => {
  console.log(designerOrderBy.value)
  designerPage.reset();
  designerPage.load(true);
})


</script>
<style scoped lang="scss">
.page-tem {
    background: #f3f7f8;
    box-sizing: border-box;
}

.page-tem .content {
    width: calc(100vw);
    box-sizing: border-box;
    .filter-nav {
        display: flex;
        justify-content: space-between;
        height: 64rpx;
        background: #ffffff;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        padding: 0 32rpx;
        border-top: 1rpx solid #e4e4e4;
        box-sizing: border-box;
        .filter-nav-item {
            display: flex;
            align-items: center;
            height: 64rpx;
            font-weight: 400;
            font-size: 24rpx;
            line-height: 64rpx;
            text-align: left;
            color: #6f6f6f;
            &.active {
                color: #f25a27;
            }
            image {
                width: 10rpx;
                height: 14rpx;
                margin-left: 8rpx;
            }
            .sort-icon {
                height: 100%;
                display: flex;
                flex-direction: column;
                gap: 10rpx;
                margin-top: 20rpx;
            }
        }
    }
}

.page-tem .product-content {
    background: #f3f7f8;
    padding: 16rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.page-tem .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16rpx;
    padding: 24rpx 16rpx;
    background: #fff;
}

.page-tem .designer-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16rpx;
    padding: 24rpx 0;
    background: #f3f7f8;
}
</style>

<style lang="scss">
.wd-tabs-custom {
    width: auto !important;
}
</style>
